<template>
  <div id="roommanage" style= "height:100%;width:100%;padding: 0;background-image: linear-gradient(to right top, #a1d1ff, #c2daff, #dce5ff, #f0f1ff, #ffffff);">
    <div class="searchwrapper">
      <p>园区</p>
      <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="areaName"
          style="width: 200px"
      >
      </el-input>
      <p style="margin-left: 20px">楼栋</p>
      <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="buildingName"
          style="width: 200px;"
      >
      </el-input>
      <p style="margin-left: 20px">房间</p>
      <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="roomName"
          style="width: 200px;"
      >
      </el-input>
      <el-button style="margin-left: 20px" type="primary" icon="el-icon-search" @click="searchRoomByAreaNameAndBuildingNameAndRoomName">搜索</el-button>

      <div style="width: 200px"></div>
    </div>
    <div id="table" style="margin-left: 50px;margin-right: 50px">
      <el-table
          :data="roomList"
          style="width: 90%">
        <el-table-column
            prop="room.name"
            label="编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="room.floor"
            label="所在楼层">
        </el-table-column>
        <el-table-column
            prop="areaName"
            label="所在园区">
        </el-table-column>
        <el-table-column
            prop="buildingName"
            label="所在楼栋">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="200">
          <template slot-scope="scope">
            <el-button  type="text" size="small" @click="showTotalNum(scope.row)">查看住宿人数</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[2,5,10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  _getTotalPeopleByRoomID,
  _searchRoomByAreaNameAndBuildingNameAndRoomName
} from '../../../api/super_admin'
export default {
  name: 'RoomManage',
  components: {
  },
  created () {
    const DOT = {
      pageSize: 10,
      pageNo: 1,
      data: {
        areaName: '',
        buildingName: '',
        roomName: ''
      }
    }
    _searchRoomByAreaNameAndBuildingNameAndRoomName(DOT).then(res => {
      if (res.status) {
        this.roomList = res.data
      }
    })
  },
  data () {
    return {
      roomList: [{
        room: {
          name: '12',
          floor: 0,
          type: '辅导员'
        },
        areaName: '江安小区',
        buildingName: '西苑一舍'
      }],
      areaName: '',
      preAreaName: '',
      buildingName: '',
      preBuildingName: '',
      roomName: '',
      preRoomName: '',
      total: 0,
      pageNo: 1,
      pageSize: 10
    }
  },
  methods: {
    getFirstPage () {
      const DOT = {
        pageSize: this.pageSize,
        pageNo: 1,
        data: {
          roomName: this.preRoomName,
          buildingName: this.preBuildingName,
          areaName: this.preAreaName
        }
      }
      _searchRoomByAreaNameAndBuildingNameAndRoomName(DOT).then(res => {
        if (res.status) {
          this.roomList = res.data
          this.pageNo = 1
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    getRoom () {
      const DOT = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        data: {
          roomName: this.preRoomName,
          buildingName: this.preBuildingName,
          areaName: this.preAreaName
        }
      }
      _searchRoomByAreaNameAndBuildingNameAndRoomName(DOT).then(res => {
        if (res.status) {
          this.roomList = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    searchRoomByAreaNameAndBuildingNameAndRoomName () {
      this.preRoomName = this.roomName
      this.preBuildingName = this.buildingName
      this.preAreaName = this.areaName
      this.getFirstPage()
    },
    handleCurrentChange (value) {
      this.pageNo = value
      this.getRoom()
    },
    handleSizeChange (value) {
      this.pageSize = value
      this.getFirstPage()
    },
    showTotalNum (val) {
      console.log(val)
      _getTotalPeopleByRoomID(val.room.id).then(res => {
        if (res.status) {
          this.$confirm('房间' + val.room.name + '共居住了' + res.data + '人', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then().catch()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
<style scoped>
.searchwrapper {
  margin-top: 10px;
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
}
.searchwrapper p {
  margin-left: 200px;
  margin-right: 10px; /* 调整 p 标签与 el-input 之间的间距 */
  font-weight: bold; /* 可选：设置 p 标签的字体加粗 */
}

.searchwrapper .el-input {
  flex: 1; /* el-input 自动填充剩余空间 */
}

</style>
